<template>
	<view class="form">
		<view class="order-container">
			<u--form labelPosition="left" :model="goodsModel" ref="goodsForm" labelWidth="80">
				<u-form-item prop="goodsPhoto" label="商品图片">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" :previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item label="商品名称" prop="goodsName" borderBottom>
					<u--input v-model="goodsModel.goodsName" placeholder="请输入商品的名称" border="none"></u--input>
				</u-form-item>
				<u-form-item label="原价" prop="oldPrice" borderBottom>
					<u--input v-model="goodsModel.oldPrice" placeholder="请输入商品的原价" border="none"></u--input>
				</u-form-item>
				<u-form-item label="现价" prop="newPrice" borderBottom>
					<u--input v-model="goodsModel.newPrice" placeholder="请输入商品的现价" border="none"></u--input>
				</u-form-item>
				<!-- <u-form-item label="联系电话" prop="phone" borderBottom>
					<u--input v-model="goodsModel.phone" placeholder="请输入联系电话" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="库存" prop="inventory" borderBottom>
					<u--input v-model="goodsModel.inventory" placeholder="请输入库存" border="none"></u--input>
				</u-form-item>
				<u-form-item label="新旧程度" prop="degree" borderBottom @click="
            showDegree = true;
            hideKeyboard();
          ">
					<u--input v-model="goodsModel.degree" disabledColor="#ffffff" placeholder="请选择新旧程度"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right" class="arrow"></u-icon>
				</u-form-item>
				<u-form-item prop="goodsDescribe">
					<u--textarea border="none" :placeholder="'请输入商品具体描述'" v-model="goodsModel.goodsDescribe"
						height="100">
					</u--textarea>
				</u-form-item>
			</u--form>

			<u-action-sheet :show="showDegree" :actions="degreeActions" title="请选择新旧程度" @close="showDegree = false"
				@select="degreeSelect">
			</u-action-sheet>
		</view>

		<view class="bottom">
			<u-line color="rgb(229, 230, 235)"></u-line>
			<view class="operation">
				<view class="button">
					<u-button text="确认发布" shape="circle" @click="submit"
						color="linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)">
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { baseUrl } from "../../utils/baseConfig.js";
	export default {
		components: {},
		data() {
			return {
				showDegree:false,
				fileList1: [],
				degreeActions: [{
						name: '九成新',
					},
					{
						name: '八成新',
					},
					{
						name: '七成新',
					},
					{
						name: '六成新',
					},
					{
						name: '五成新',
					},
					{
						name: '四成新',
					},
					{
						name: '三成新',
					},
					{
						name: '二成新',
					},
				],
				goodsModel: {
					goodsName: "",
					oldPrice: "",
					newPrice: "",
					// phone: "",
					inventory: "",
					degree: "",
					goodsDescribe: "",
					goodsPhoto: "",
				},
				rules: {
					goodsName: {
						type: "string",
						required: true,
						message: "请填写商品名称",
						trigger: ["blur", "change"],
					},
					oldPrice: {
						type: "string",
						required: true,
						message: "请填写商品原价",
						trigger: ["blur"],
					},
					newPrice: {
						type: "string",
						required: true,
						message: "请填写商品现价",
						trigger: ["blur"],
					},
					// phone: {
					// 	type: "number",
					// 	required: true,
					// 	message: "请输入联系方式",
					// 	trigger: ["blur", "change"],
					// },
					inventory: {
						type: "number",
						required: true,
						message: "请输入库存",
						trigger: ["change"],
					},
					degree: {
						type: "string",
						required: true,
						message: "请输入新旧程度",
						trigger: ["change"],
					},
					goodsDescribe: {
						type: "string",
						required: true,
						message: "请描述商品信息",
						trigger: ["change"],
					},
					goodsPhoto: {
						type: "string",
						required: true,
						message: "请添加商品图片",
						trigger: ["change"],
					},
				},
			};
		},

		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.goodsForm.setRules(this.rules);
		},
		methods: {
			
			degreeSelect(e) {
				this.goodsModel.degree = e.name
				this.$refs.goodsForm.validateField('degree')
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					if (event.name === "1") {
						this.goodsModel.goodsPhoto = result;
						this.$refs.goodsForm.validateField("goodsPhoto");
					}
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);

					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${baseUrl}api/private/upload`,
						filePath: url,
						header: {
							Authorization: this.$store.getters.userInfo && this.$store.getters.userInfo
								.token ?
								this.$store.getters.userInfo.token : "",
						},
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							const url = JSON.parse(res.data).data.url;
							resolve(url);
						},
					});
				});
			},

			submit() {
				const userInfo = this.$store.getters.userInfo;
				this.$refs.goodsForm
					.validate()
					.then((res) => {
						const data = {
							uid: userInfo.uid,
							...this.goodsModel,
							phone:userInfo.userPhone
						};
						this.$http("post", "api/private/secondGoods/create", {
							data,
							success: (res) => {
								setTimeout(() => {
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2];
									uni.navigateBack({
										delta: 1,
										success: () => {
											beforePage.$vm.getSecondList();
										},
									});
								}, 1000);
							},
							successMsg: "发布宝贝成功！",
						});
					})
					.catch((errors) => {
						uni.$u.toast("请将商品信息标红部分填写完整！");
					});
			},

			hideKeyboard() {
				uni.hideKeyboard();
			},
		},
	};

</script>

<style scoped lang="scss">
	::v-deep .u-tabs .u-tabs__wrapper__nav__item {
		flex: 1;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 14px;
	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: end;
	}

	::v-deep .u-number-box__plus {
		background-color: rgb(163, 181, 250) !important;
	}

	::v-deep .u-textarea {
		background: rgb(242, 242, 242);
		border-radius: 8px;
	}

	.form {
		height: 100vh;
		background: #fff;
	}

	.order-container {
		padding: 15px;
	}

	.icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

	.arrow {
		margin-left: 10px;
	}

	.bottom {
		height: 90px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		bottom: 10px;
		position: fixed;

		.operation {
			padding: 0 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: calc(100% - 30px);
		}

		.text {
			color: rgb(51, 51, 51);
			font-size: 14px;
		}

		.money {
			color: rgb(255, 104, 83);
			font-size: 14px;
		}

		.button {
			width: 100%;
		}
	}

</style>

